<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="isCheckAll" />
    </label>
    <span>
      <span>已完成 {{ isDoneNum }}</span> / 全部 {{ total }}
    </span>
    <button class="btn btn-danger">清除已完成任务</button>
  </div>
</template>

<script>
/**
 * 定义TodoFooter组件
 * 该组件作为待办事项列表的底部栏，展示完成项的数量、总待办事项数量
 * 并提供标记全部待办事项为已完成的操作功能
 */
export default {
  name: "TodoFooter",
  props: {
    /**
     * 已完成待办事项的数量
     * 用于在底部栏显示已完成的事项占比
     */
    isDoneNum: {
      type: Number,
      required: true,
    },
    /**
     * 总待办事项的数量
     * 与已完成数量一起用于计算并显示完成率
     */
    total: {
      type: Number,
      required: true,
    },
    /**
     * 标记所有待办事项为已完成的函数
     * 该函数作为一个方法传递给TodoFooter组件，用于触发全部待办事项状态的更改
     */
    updateAllTodoIsDone: {
      type: Function,
      required: true,
    },
  },
    computed: {

    isCheckAll: {
      get() {
        return this.isDoneNum === this.total && this.total;
      },
      set(val) {
        this.updateAllTodoIsDone(val);
      },
    },
  },
};
</script>

<style>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>
